import React, { useEffect, useRef, useState } from 'react';
import PluginManager from 'rtn-supernote-plugin-core/src/PluginManager';
import StickerCreatePage from './StickerCreatePage';
import StickerBasePage from './StickerBasePage';
import { AppState, DeviceEventEmitter, Dimensions, Keyboard, View } from 'react-native';
import { SNEvent } from 'rtn-supernote-plugin-core';

const StickerPage = () => {
  // 记录当前使用的贴纸库，插入贴纸界面使用
  const [currentStickerGroup, setCurrentStickerGroup] = useState(null);
  const [stickerVisible, setStickerVisible] = useState(null);
  const [appNowState, setAppNowState] = useState(null);
  const [rotation, setRotation] = useState(null);
  const [screenWidth, setScreenWidth] = useState(
    Dimensions.get('window').width,
  );
  const [screenHeight, setScreenHeight] = useState(
    Dimensions.get('window').height,
  );
  const appState = useRef(AppState.currentState);
  const getRotation = async () => {
    var rotation = await SNEvent.getOrientation();
    setScreenHeight(Dimensions.get('window').height);
    setScreenWidth(Dimensions.get('window').width);
    setRotation(rotation);
  }

  useEffect(() => {
    getRotation();
    const handleDimensionsChange = ({ window: { width, height } }) => {
      setScreenWidth(width);
      setScreenHeight(height);
      console.log(width, height, 'width, heightwidth, height');
    };
    Dimensions.addEventListener('change', handleDimensionsChange);

    DeviceEventEmitter.addListener('plugin_event_rotation', msg => {
      console.log('rotation test:' + msg.rotation);
      setRotation(msg.rotation);
    });
    const subscription = AppState.addEventListener('change', nextAppState => {
      console.log("App State:", nextAppState);
      setAppNowState(nextAppState);
    });
    getEvent();
    const eventSub = PluginManager.addEventListener({
      onStart: (action) => {

      },
      onStop: () => {
        console.log("plugin stop");
        setStickerVisible(null);
      }
    });
    return () => {
      subscription.remove();
      eventSub.remove();
    };
  }, []);
  const getEvent = () => {
    PluginManager.registerMenuItemEventListener({
      onMenuItemPress: event => {
        console.log(event, 'eventeventevent');
        if (event?.pressEvent === 3) {
          setStickerVisible(event?.id);
        }
      },
    });
  };


  return (
    <>
      {stickerVisible === 200 ? (
        <StickerCreatePage
          appState={appNowState}
          rotation={rotation}
          changeEvent={() => setStickerVisible(null)}
          screenWidth={screenWidth}
          screenHeight={screenHeight}
        />
      ) : stickerVisible === 100 ? (
        <StickerBasePage
          appState={appNowState}
          rotation={rotation}
          changeEvent={() => setStickerVisible(null)}
          screenWidth={screenWidth}
          screenHeight={screenHeight}
          currentStickerGroup={currentStickerGroup}
          onCurrentStickerGroup={(stickerGroup) => setCurrentStickerGroup(stickerGroup)}
          
        />
      ) : null}
    </>
  );
};

export default StickerPage;
